<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>test</title>
	<script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="css/animate.css" />
    <style>
			.aniTime{   
              /*修改动画默认配置*/
			  animate-duration: 2s;   /*动画持续时间*/
			  -webkit-animation-duration: 2s; /*动画持续时间*/
			  /*	animate-delay: 1s;    /*延迟多少时间执行动画*/
			  /* -webkit-animation-delay: 1s; /*延迟多少时间执行动画*/
				/*animate-iteration-count: 2;    /*动画执行次数*/
			   /*-webkit-animate-iteration-count: 2;  /*动画执行次数*/
			}
   </style>
</head>
<body>
	  <div id="app">	  
	   <h1>vue-router  动画特效</h1>
	      <p>{{ message }}</p>
	      <router-link to="/one">点击跳转到一</router-link>
	       <router-link to="/two">点击跳转到二</router-link>
	           <router-link to="/three">点击跳转到三</router-link>
	       <transition  name='add' enter-active-class='animated  fadeIn aniTime'  > <!--  这里的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。 -->
	             <router-view style='margin-top:10px;'></router-view>
	       </transition>
	      <p>上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 transition 并设置不同的 name。</p>

			<p>
			<span class="hljs-keyword">const</span> Bar = {<br/>
			  template: <span class="hljs-string">`<br/>
			    &lt;transition name="fade"&gt;<br/>
			      &lt;div class="bar"&gt;...&lt;/div&gt;<br/>
			    &lt;/transition&gt;<br/>
			  `</span><br/>
			}
			</p>

	  </div>
</body>
</html>
<script>
var luyouAni = new VueRouter({
    routes : [
              {
            	  path : "/one",
            	  components : {
            		  default : {
            			  template : " <div style='border:2px solid #000; padding:15px; background:green;' >one</div>"
            		  } 
            	  }
              },
              {
            	  path : "/two",
            	  components : {
            		  default : {
            			  template : "<div style='border:1px dashed red; padding:15px; background:orange;' >two</div>"
            		  } 
            	  }
              },
              {
            	  path : "/three",
            	  components : {
            		  default : {
            			  template : "<div style='border:1px dashed red; padding:15px; background:#000; color:#fff;' >three</div>"
            		  } 
            	  }
              } 
          ]	
});


new Vue({
	el: "#app",
	router : luyouAni,
	data : {
		message : "vue-router 动画特效的学习"
	}
});




</script>